<template>
    <div class="shop-wrap">
        <div class="shop-info">
            <div class="shop-content df jcsb">
                <div class="left">
                    <h1>{{ shopData.name }}</h1>
                    <div class="left-rate df aic">
                        <van-rate gutter="7px" color="#fe9902" v-model="shopData.score" :count="5" />
                        <span>({{ shopData.score }})</span>
                        <p>月售{{ shopData.sellCount }}单</p>
                    </div>
                </div>
                <div class="right df fdc aic">
                    <van-icon name="like" color="red" size="22px" />
                    <span>已收藏</span>
                </div>
            </div>
            <van-divider />
            <div class="shop-detail df">
                <div class="min-price tac">
                    <p>起送价</p>
                    <div>
                        <span class="count">{{ shopData.minPrice }}</span>元
                    </div>
                </div>
                <div class="delivery-price tac">
                    <p>{{ shopData.description }}</p>
                    <div>
                        <span class="count">{{ shopData.minPrice }}</span>元
                    </div>
                </div>
                <div class="delivery-time tac">
                    <p>平均配送时间</p>
                    <div>
                        <span class="count">{{ shopData.deliveryTime }}</span>分钟
                    </div>
                </div>
            </div>
        </div>





        <div class="activity-notice">
            <h1>活动与公告</h1>
            <div class="notice">
                {{ shopData.bulletin }}
            </div>
            <van-divider />
            <div class="detail-tabs df aic" v-for="(v, i) in shopData.supports" :key="i">
                <span class="tab">折</span>
                <div class="tab-content">{{ v }}</div>
            </div>
        </div>
    </div>
</template>

<script>
import { mapState } from 'vuex';

export default {
    computed: {
        ...mapState('shop', ['shopData'])
    }
}
</script>

<style lang="scss" scoped>
.shop-wrap {
    background-color: #f4f5f7;


    .shop-info {
        padding: 30px 20px;
        background-color: #fff;

        .shop-content {
            .left {
                h1 {
                    font-size: 22px;
                }

                .left-rate {
                    margin-top: 10px;

                    span {
                        margin: 0 10px;
                        color: #565656;
                        font-size: 16px;
                    }

                    p {
                        color: #565656;
                        font-size: 16px;
                    }
                }
            }

            .right {
                justify-content: space-around;

                span {
                    color: #565656;
                }
            }
        }

        .shop-detail {
            justify-content: space-around;
            color: #999;

            div {
                p {
                    font-size: 16px;
                    margin-bottom: 10px;
                }

                span {
                    font-size: 22px;
                    color: #000;
                }
            }
        }
    }

    .activity-notice {
        margin-top: 20px;
        background-color: #fff;
        padding: 30px 20px;

        h1 {
            margin-bottom: 15px;
            font-size: 24px;
        }

        .notice {
            font-size: 16px;
            line-height: 28px;
            color: #e24c26;
        }
        .detail-tabs {
            text-align: left;
            margin: 15px 0;

            .tab {
                padding: 3px 4px;
                background-color: #e24c26;
                border-radius: 3px;
                font-weight: bold;
                color: #fff;
            }

            .tab-content {
                margin-left: 5px;
                color: #000;
                font-size: 16px;
            }
        }
    }
}</style>